<template>
    <div class="mi-content">
        <a-card :bordered="false">

            <!--查询条件-->
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="规则编号">
                                <a-input placeholder=""/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="使用状态">
                                <a-select placeholder="请选择" default-value="0">
                                    <a-select-option value="0">全部</a-select-option>
                                    <a-select-option value="1">关闭</a-select-option>
                                    <a-select-option value="2">运行中</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <template v-if="advanced">
                            <a-col :md="8" :sm="24">
                                <a-form-item label="调用次数">
                                    <a-input-number style="width: 100%"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                                <a-form-item label="更新日期">
                                    <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                                <a-form-item label="使用状态">
                                    <a-select placeholder="请选择" default-value="0">
                                        <a-select-option value="0">全部</a-select-option>
                                        <a-select-option value="1">关闭</a-select-option>
                                        <a-select-option value="2">运行中</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                                <a-form-item label="使用状态">
                                    <a-select placeholder="请选择" default-value="0">
                                        <a-select-option value="0">全部</a-select-option>
                                        <a-select-option value="1">关闭</a-select-option>
                                        <a-select-option value="2">运行中</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </template>
                        <a-col :md="!advanced && 8 || 24" :sm="24">
                            <div class="table-page-search-submitButtons"
                                 :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                                <a-button type="primary">查询</a-button>
                                <a-button style="margin-left: 8px">重置</a-button>
                                <a @click="toggleAdvanced" style="margin-left: 8px">
                                    {{ advanced ? '收起' : '展开' }}
                                    <a-icon :type="advanced ? 'up' : 'down'"/>
                                </a>
                            </div>
                        </a-col>
                    </a-row>
                </a-form>
            </div>

            <!--功能操作-->
            <div class="table-operator">
                <a-button type="primary" icon="plus">新建</a-button>
                <a-dropdown v-if="selectedRowKeys.length > 0">
                    <a-menu slot="overlay">
                        <a-menu-item key="1">
                            <a-icon type="delete"/>
                            删除
                        </a-menu-item>
                        <a-menu-item key="2">
                            <a-icon type="lock"/>
                            锁定
                        </a-menu-item>
                    </a-menu>
                    <a-button style="margin-left: 8px">
                        批量操作
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>
            </div>

            <!--表格-->
            <div>
                <a-alert :showIcon="true" style="margin-bottom: 16px">
                    <div slot="message">
                        <span style="margin-right: 12px">
                            已选择:<a style="font-weight: 600"> {{selectedRowKeys.length}}</a>
                        </span>
                        <a v-if="selectedRowKeys.length >0" style="margin-left: 24px" @click=clearSelected>清空</a>
                    </div>
                </a-alert>

                <s-table
                        ref="table"
                        size="default"
                        :columns="columns"
                        :data="loadData"
                        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }">
                    <div slot="action" slot-scope="text,record">
                        <a class="edit" @click="() => edit(record)">修改</a>
                        <a-divider type="vertical"/>
                        <a class="delete" @click="() => del(record)">删除</a>
                    </div>
                </s-table>
            </div>

            <!--编辑-->
            <a-modal title="Basic Modal" v-model="visible" @ok="handleOk" okText="确认" cancelText="取消">
            </a-modal>
            <!--详情-->
            <!--            <a-modal title="Basic Modal" v-model="visible" @ok="handleOk" okText="确认" cancelText="取消">-->

            <!--            </a-modal>-->

        </a-card>
    </div>
</template>

<script lang="ts">
    import {Component} from "vue-property-decorator";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import $http from "@/core/util/http";
    import STable from "@/components/Table/STable.vue";
    import {API} from "@/core/api/Api";
    import {successMsg, warningMsg} from "@/core/util/message";

    const formItemLayout = {
        labelCol: {span: 4},
        wrapperCol: {span: 8},
    };
    const formTailLayout = {
        labelCol: {span: 4},
        wrapperCol: {span: 8, offset: 4},
    };
    @Component({
        name: 'DictList',
        components: {STable}
    })
    export default class DictList extends mixins(BaseVue) {
        columns: any = [
            {
                title: 'name',
                dataIndex: 'name',
            }, {
                title: 'code',
                dataIndex: 'code',
            }, {
                title: 'value',
                dataIndex: 'value',
            }, {
                title: 'sort',
                dataIndex: 'sort',
            },
            {
                title: '操作',
                dataIndex: 'action',
                width: '120px',
                scopedSlots: {customRender: 'action'}
            }
        ];

        //初始化
        mounted() {
        }

        // 加载数据方法
        loadData(parameter: any = null) {
            // this.queryParam.closeLoading = true;
            if (parameter) {
                this.queryParam.current = parameter.current;
                this.queryParam.pageSize = parameter.pageSize;
            }
            console.log("this.queryParam---->", JSON.stringify(this.queryParam));
            return $http.post(API.system_dict_page, this.queryParam).then((res: any) => {
                return res.data
            })
        };

        visible = false;

        edit(row: any) {
            this.visible = true;
        }

        handleOk() {
            this.visible = false;
        }

        del(row: any) {
            this.$confirm({
                title: '提示',
                content: `真的要删除 code(${row.code}) 吗?`,
                okText: '删除',
                okType: 'danger',
                cancelText: '取消',
                onOk: () => {
                    $http.post(API.system_dict_delete, [row.id])
                        .then((res: any) => {
                            if (res.success) {
                                successMsg("操作成功");
                                (this.$refs.table as any).refresh();
                            }
                        })
                },
                onCancel: () => {
                    warningMsg("已取消");
                }
            })
        }

        //勾选表格
        onSelectChange(selectedRowKeys: any, selectedRows: any) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows;
        }

        //清空勾选
        clearSelected() {
            this.selectedRowKeys = [];
            this.selectedRows = [];
        }

    }
</script>
<style lang="less" scoped>

</style>
